<template>
  <div>
    <el-container>
      <el-header>
        <div style="padding: 10px 0;margin-left: 50px">
        <el-input style="width: 500px" suffix-icon="el-icon-search" placeholder="请输入高校名称" v-model="uniName"></el-input>
          <el-button style="margin-left: 20px;width: 100px" type="primary" @click="load">搜索</el-button>
      </div>
      </el-header>
      <el-main style="border-bottom: gray;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);margin-top: 10px">
        <div class="infinite-list-wrapper" >
          <div style="border-bottom: gray;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
            <el-row style="height: 300px"
                    class="list"
                    v-infinite-scroll="load"
                    infinite-scroll-disabled="disabled"
                    infinite-scroll-distence="0px"
                    infinite-scroll-delay="2000"
                    v-for="uni in uniData"
            >
              <el-col class="list-item" :span="3">
                <el-image
                    style="width: 170px; height: 170px;"
                    :src="uni.logoUrl"
                    :fit="'fill'"></el-image>
              </el-col>
              <el-col class="list-item" :span="6" style="margin-top: 10px">
                <el-row>
                  <div>
                    <el-link type="primary" style="font-size: 20px">{{ uni.universityName }}</el-link>
                  </div>
                  <el-divider/>
                </el-row>
                <el-row>
                  <el-col>
                    <el-descriptions class="margin-top" :column="2" :size="'medium'" border style="width: 1000px">
                      <el-descriptions-item span="1">
                        <template slot="label">
                          <i class="el-icon-office-building"></i>
                          院校所在地
                        </template>
                        {{uni.location}}
                      </el-descriptions-item>
                      <el-descriptions-item span="1">
                        <template slot="label">
                          <i class="el-icon-mobile-phone"></i>
                          高校类型
                        </template>
                        {{uni.type}}
                      </el-descriptions-item>
                      <el-descriptions-item span="1">
                        <template slot="label">
                          <i class="el-icon-location-outline"></i>
                          高校隶属
                        </template>
                        {{ uni.admin }}
                      </el-descriptions-item>
                      <el-descriptions-item span="1">
                        <template slot="label">
                          <i class="el-icon-tickets"></i>
                          联系电话
                        </template>
                        {{ uni.phone }}
                      </el-descriptions-item>
                    </el-descriptions>
                  </el-col>

                </el-row>
              </el-col>
            </el-row>
            <p v-if="loading">加载中...</p>
            <p v-if="noMore">没有更多了</p>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>

</template>

<style>
  .infinite-list-wrapper{
    overflow:auto;
    display: flex;
    flex-direction: column;
  }
</style>

<script>
export default {
  data () {
    return {
      pageNum:1,
      pageSize:10,
      uniName:"",
      total:0,
      loading: false,
      uniData:[]
    }
  },
  created() {
    this.loadData()
  },
  computed: {
    noMore () {
      return (this.pageNum*this.pageSize) >= this.total
    },
    disabled () {
      return this.loading || this.noMore
    }
  },
  methods: {
    load () {
      this.loading = true
      this.pageNum=this.pageNum+1
      this.loadData()
      this.loading=false;
    },
    loadData(){
      this.request.get("http://localhost:9090/uniInfo/page",{
        params:{
          pageNum:this.pageNum,
          pageSize:this.pageSize,
          uniName:this.uniName
        }
      }).then(res => {
        console.log(res)
        this.uniData=res.records
        this.total=res.total
        console.log(typeof (this.uniData))
      })
    },

    }

}
</script>
